<template>
    <div>
        <van-nav-bar
            title="用户注册"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />

        <van-form class="reg-form" label-width="100px" @submit="onSubmit">
            <van-field
                v-model="reg.username"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                required
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="reg.password"
                required
                type="password"
                name="密码"
                label="设置密码"
                placeholder="设置密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
                v-model="reg.confirmPassword"
                type="password"
                name="密码"
                required
                label="确认密码"
                placeholder="确认密码"
                :rules="[{ required: true, message: '请再次输入密码确认' }]"
            />

            <van-field
                v-model="reg.captcha"
                type="password"
                name="密码"
                required
                label="图形严重码"
                placeholder="确认密码"
                :rules="[{ required: true, message: '请输入正确的验证码' }]"
            >
                <template #button>
                    <div
                        class="reg-img"
                        v-html="reg.captchaSvg"
                        @click="getRegImg"
                    />
                </template>
            </van-field>
            <div style="margin: 16px">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { regHook } from "./hooks";
export default defineComponent({
    setup() {
        const { getRegImg, reg, onSubmit, onClickLeft } = regHook();
        getRegImg();
        return { reg, onSubmit, onClickLeft, getRegImg };
    },
});
</script>

<style lang="scss" scoped>
.reg-form {
    padding: 10px 10px;
}
.reg-img {
    background: pink;
    width: 100px;
    height: 30px;
}
</style>
